<template>
  <div>
    
    <van-nav-bar
      title="轮播图详情页"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      
    />
    <div class="dl">
        <img :src="musicInfo.albumPicUrl" alt="">
        <p>歌手：{{musicInfo.artistName}}</p>
        <p>歌名：{{musicInfo.musicName}}</p>
        <p>专辑名字：{{musicInfo.albumName}}</p>
        
        <div class="ado">
            <audio :src="musicInfo.musicMp3Url" controls></audio>
        </div>
        
    </div>
    
  </div>
</template>
<script>
import url from '../tools/url.js';
export default {
  name: "Swipdetail",
  data() {
    return {
        musicInfo:{}
    };
  },
  methods: {
      onClickLeft(){
          this.$router.go(-1)
      }
  },
  mounted(){
      var id=this.$route.query.musicId;
      var token=sessionStorage.getItem("token");
      var str=`token=${token}&musicId=${id}`
      this.axios.post(url.GETMUSICBYID,str).then(res=>{
          console.log(res);
          if (res.data.code==200) {
              this.musicInfo=res.data.data;
          }else{

          }
      })
  }
};
</script>
<style scoped>
.dl{
    margin: auto;
}
.dl img{
    position: relative;
    width: 50%;
	left: 50%;
	
	transform: translate(-50%);
}
.dl p{
    text-align: center;
}
.ado{
    width: 100%;
    height: 50px;
    margin: 0 auto;
}
audio{
    width: 100%;
    height: 50px;
}
</style>
